import React, { Component } from "react";
import { Card, Table, Button, Icon, Modal } from "antd";
import { reqCategorys, reqUpdateCategory, reqAddCategory } from "../../api";
import Updateform from "./updatefrom";
import Addform from "./addform";

class Category extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      categorys: [], // 一级分类列表
      parentId: "0", // 默认0
      subCategorys: [], // 子分类
      parentName: "",
      showStatus: 0,
    };
  }
  initColumns = () => {
    this.columns = [
      {
        title: "分类名称",
        dataIndex: "name",
      },
      {
        title: "操作",
        render: (category) => (
          <span>
            <span onClick={() => this.showUpdate(category)}>修改分类</span>
            {this.state.parentId === "0" ? (
              <span onClick={() => this.showSubCategorys(category)}>
                查看子分类
              </span>
            ) : null}
          </span>
        ),
      },
    ];
  };
  componentWillMount() {
    this.initColumns();
  }
  componentDidMount() {
    this.getCategorys();
  }
  getCategorys = async (parentId) => {
    this.setState({ loading: true }); // 加载
    parentId = parentId || this.state.parentId;
    const result = await reqCategorys(parentId);
    this.setState({ loading: false }); // 关闭加载框
    console.log(result);
    if (result.status === 0) {
      const categorys = result.data;
      if (this.state.parentId === "0") {
        // 说明当前请求是一级分类
        this.setState({ categorys });
      } else {
        this.setState({
          subCategorys: categorys,
        });
      }
    }
  };
  // 显示二级分类
  showSubCategorys = (category) => {
    this.setState(
      {
        parentId: category._id,
        parentName: category.name,
      },
      () => {
        this.getCategorys(); // 此时的parentId已经改成点击的parentId
      }
    );
  };
  showCategorys = () => {
    this.setState({
      parentId: "0",
      parentName: "",
      subCategorys: [],
    });
  };
  showUpdate = (category) => {
    console.log(category);
    this.category = category;
    this.setState({
      showStatus: 2,
    });
  };
  showAdd = () => {
    this.setState({
      showStatus: 1,
    });
  };

  //取消
  handelcancel = () => {
    this.setState({ showStatus: 0 });
  };
  //添加
  addCategory = () => {
    this.form.validateFields(async (err, values) => {
      if (!err) {
        this.setState({
          showStatus: 0,
        });
        const { parentId, categoryName } = values;
        this.form.resetFields();
        const result = await reqAddCategory(categoryName, parentId);
        if (result.status === 0) {
          if (parentId == this.state.parentId) {
            this.getCategorys();
          } else if (parentId === "0") {
            this.getCategorys("0");
          }
        }
      }
    });
  };
  //修改
  updateCategory = async () => {
    console.log("update");
    this.form.validateFields(async (err, values) => {
      if (!err) {
        console.log(222, values);
        this.setState({
          showStatus: 0,
        });
        const categoryId = this.category._id;
        const { categoryName } = values;
        this.form.resetFields();
        const result = await reqUpdateCategory(categoryId, categoryName);
        if (result.status == 0) {
          this.getCategorys();
        }
      }
    });
  };
  render() {
    const {
      loading,
      categorys,
      parentId,
      subCategorys,
      parentName,
      showStatus,
    } = this.state;
    const category = this.category || {};
    const title =
      parentId === "0" ? (
        "一级分类列表"
      ) : (
        <>
          <span onClick={this.showCategorys}>一级分类列表</span>---
          <span>{parentName}</span>
        </>
      );
    const extra = (
      <Button type="primary" icon="plus" onClick={this.showAdd}>
        添加
      </Button>
    );
    return (
      <>
        <Card title={title} extra={extra}>
          <Table
            dataSource={parentId === "0" ? categorys : subCategorys}
            columns={this.columns}
            loading={loading}
            rowKey="_id"
            pagination={{
              defaultPageSize: 5,
              defaultCurrent: 1,
            }}
          />
          <Modal
            title="添加分类"
            visible={showStatus == 1}
            onCancel={this.handelcancel}
            onOk={this.addCategory}
          >
            <Addform
              categorys={categorys}
              parentId={parentId}
              setForm={(form) => {
                this.form = form;
              }}
            />
          </Modal>
          <Modal
            onCancel={this.handelcancel}
            title="修改分类"
            visible={showStatus == 2}
            onOk={this.updateCategory}
          >
            <Updateform
              categoryName={category.name}
              setForm={(form) => {
                this.form = form;
              }}
            />
          </Modal>
        </Card>
      </>
    );
  }
}

export default Category;
